<template>
    <div class="layout-main" :class="{hidderSidebar : sidebar}">

        <!-- 侧边栏 -->
        <layout-sidebar></layout-sidebar>

        <!-- 主体内容 -->
        <div class="layout-container">
            <!-- 头部 -->
            <layout-header></layout-header>
            <!-- 正文 -->
            <layout-content></layout-content>
        </div>

        <!-- 消息提示音 -->
        <audio id="sound" autoplay="autoplay"></audio>

    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import LayoutSidebar from "./layout-sidebar.vue";
import LayoutHeader from "./layout-header.vue";
import LayoutContent from "./layout-content.vue";
import initWebsocket from "@/libs/websocket.js";
export default {
    name: "Main",
    components: {
        LayoutHeader,
        LayoutSidebar,
        LayoutContent
    },
    created() {
        initWebsocket(); //连接WebSocket服务器
    },
    computed: {
        sidebar() {
            return this.$store.state.app.sidebar;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
@import "../../assets/styles/layout";
</style>